<template>
  <div id="play">
    <div class="box">
      <div class="narrow_box" @click="narrow">
        <img src="/images/music/narrow.png" alt="" />
      </div>
      <div class="img">
        <img
          class="topimg"
          :class="getState ? 'playing' : 'pause'"
          src="/images/music/cm2_play_needle_play-ip6@2x.png"
        />
        <div
          class="innerimg"
          :style="{ 'animation-play-state': getState ? 'running' : 'paused' }"
        >
          <img :src="getImgUrl" alt />
        </div>
        <img
          class="outerimg"
          :style="{ 'animation-play-state': getState ? 'running' : 'paused' }"
          src="/images/music/disc.png"
        />
        <div class="music_name">
          {{ getName }}
          <span>--</span>
          {{ getAuthor }}
        </div>
      </div>
      <div class="lyrics">
        <my-scroll ref="playScroll" :opacity="opacity">
          <div class="lyricscontent">
            <ul v-if="getLyrics">
              <li
                v-for="(item, index) in getLyrics"
                :key="index"
                :class="currentIndex == index ? 'currentLyric' : ''"
              >
                {{ item[1] }}
              </li>
            </ul>
            <span v-else>暂无歌词</span>
          </div>
        </my-scroll>
      </div>
      <div class="progress">
        <div class="current">{{ currentTime | formDate }}</div>
        <el-progress
          :text-inside="true"
          :percentage="percentage"
          status="exception"
          @click.native="moved"
          :color="customColor"
        ></el-progress>
        <div class="duration">{{ duration | formDate }}</div>
      </div>
      <!--控制组件-->
      <div class="controlbox">
        <div>
          <div class="model" @click="changeModel">
            <img v-if="getModel == 0" src="/images/music/cm2_icn_loop@2x.png" />
            <img v-if="getModel == 1" src="/images/music/cm2_icn_one@2x.png" />
            <img
              v-if="getModel == 2"
              src="/images/music/cm2_icn_shuffle@2x.png"
            />
          </div>
          <div>
            <img
              class=""
              @click="prevSong"
              src="/images/music/cm2_play_btn_prev@2x.png"
            />
          </div>
          <div class="play_pause" @click="clickplay">
            <img
              class=""
              v-if="!getState"
              src="/images/music/cm2_fm_btn_play@2x.png"
            />
            <img class="" v-else src="/images/music/cm2_fm_btn_pause@2x.png" />
          </div>
          <div>
            <img
              class=""
              @click="nextSong"
              src="/images/music/cm2_fm_btn_next@2x.png"
            />
          </div>
          <div class="menu">
            <img
              @click="showMenu"
              class=""
              src="/images/music/cm2_icn_list@2x.png"
            />
          </div>
        </div>
      </div>
      <!-- 背景 -->
      <div class="bgbox">
        <img :src="getImgUrl" alt class="bg" />
        <div class="bg-mask"></div>
      </div>
    </div>
    <transition name="fade">
      <div id="menu" v-if="show">
        <div class="top">
          <div class="text">播放列表：共{{ getMusicList.length }}首</div>
          <div class="close" @click="close">
            <img src="/images/music/cm2_playlist_icn_dlt@2x.png" alt="" />
          </div>
        </div>
        <div class="bottom">
          <my-scroll :opacity="1">
            <div
              v-for="(item, index) in getMusicList"
              :key="index"
              class="item"
              @click="playSong(index)"
            >
              <span
                class="num"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ index + 1 }}</span
              >
              <span
                class="name"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ item.name }}</span
              >
              <span
                class="author"
                :class="getIndex == index ? 'active_color' : ''"
                >{{ item.author }}</span
              >
              <span
                class="el-icon-delete delete"
                @click="delsong(index)"
              ></span>
            </div>
          </my-scroll>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      show: false,
      currentTime: 0,
      currentIndex: 0,
      scrolltop: 0,
      opacity: 0,
      percentage: 0,
      customColor: "#dd0c5c",
      // currentTime: "00",
      // duration: "00",
    }
  },
  computed: {
    // vue辅助函数
    ...mapGetters([
      "getState",
      "getName",
      "getAuthor",
      "getMusicUrl",
      "getImgUrl",
      "getIndex",
      "getModel",
      "getLyrics",
      "getMusicList",
    ]),
  },
  filters: {
    formDate(date) {
      //格式化时间过滤器
      var m = parseInt(date / 60)
      if (m < 10) {
        m = "0" + m
      }
      var s = parseInt(date % 60)
      if (s < 10) {
        s = "0" + s
      }
      return m + ":" + s
    },
  },
  watch: {
    scrolltop: function(newValue, oldValue) {
      this.$refs.playScroll.$refs.vs.scrollTo({
        y: newValue,
      })
    },
  },
  mounted() {
    var audio = document.getElementById("myaudio")

    //监听音频是否可以开始播放
    audio.addEventListener("canplay", () => {
      this.duration = audio.duration
    })
    // 监听音频播放的进度
    audio.addEventListener("timeupdate", () => {
      this.currentTime = audio.currentTime
      this.percentage = (this.currentTime / this.duration) * 100
      if (this.getLyrics) {
        let lyricArray = this.getLyrics
        let length = lyricArray.length
        if (length) {
          //获取歌词数字
          //计算滚动条的位置
          if (this.currentIndex == 0) {
            this.scrolltop = 0
          }
          if (this.currentIndex >= 2) {
            this.scrolltop = (this.currentIndex - 2) * 25
          }
          //遍历所有歌词
          //最后一句歌词没有下一句,所以不需要跟下一句的时间做比较
          if (this.currentIndex == length - 2) {
            //判断当前的时间是否大于等于最后一句的时间
            if (this.currentTime >= lyricArray[length - 1][0]) {
              //正在唱最后一句
              this.currentIndex = length - 1
            }
          } else {
            for (var i = 0; i < length - 1; i++) {
              //将每个歌曲进度都跟数组中的歌词比较,在当前歌词的时间到下一句歌词的时间范围之内
              if (
                this.currentTime >= lyricArray[i][0] &&
                this.currentTime < lyricArray[i + 1][0]
              ) {
                //设置正在播放的行号
                this.currentIndex = i
                this.val = lyricArray[i][1]
              }
            }
          }
        }
      }
    })
  },

  methods: {
    // 关闭页面
    narrow() {
      this.$EventBus.$emit("changeShowPlay") //更改App.vue页面Play组件的状态
    },
    // 点击播放暂停
    clickplay() {
      this.$EventBus.$emit("play_pause") //更改MyAudio.vue页面audio标签的状态
    },
    // 点击更换播放模式
    changeModel() {
      let model = this.getModel + 1
      if (model > 2) {
        model = 0
      }
      this.$store.commit("changeModel", model)
    },
    //拖动进度条触发的事件
    moved(e) {
      let progress = document.body.clientWidth * 0.7
      this.percentage = e.offsetX / progress
      this.currentTime = this.duration * this.percentage
      var audio = document.getElementById("myaudio")
      audio.currentTime = parseInt(this.percentage * this.duration)
    },
    // 上一首
    prevSong() {
      this.$store.commit("prev", { model: this.clickModel })
    },
    // 下一首
    nextSong() {
      this.$store.commit("next", { model: this.clickModel })
    },
    // 打开播放列表
    showMenu() {
      this.show = true
    },
    // 关闭播放列表
    close() {
      this.show = false
    },
    // 点击播放列表
    playSong(index) {
      this.$store.commit("upDateIndex", index)
    },
    // 删除歌曲
    delsong(index) {
      this.$store.commit("delete", index)
    },
    // 删除列表中所有歌曲
    deleteAll() {
      uni.showModal({
        title: "提示",
        content: "您确认清空播放列表？",
        success: (res) => {
          if (res.confirm) {
            this.$store.commit("deleteAll")
          } else if (res.cancel) {
          }
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
#play {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: white;
  z-index: 999;
  .box {
    height: 100%;
    width: 100%;
    position: relative;
    .narrow_box {
      position: absolute;
      z-index: 4;
      top: 0;
      right: 0;
      width: 3.125rem;
      height: 3.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 1.875rem;
        height: auto;
      }
    }
    .img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 3;
      .topimg {
        position: absolute;
        width: 6.25rem;
        height: auto;
        top: -1.75rem;
        left: 50%;
        transform-origin: 0 12%;
        z-index: 5;
        transition: 1s;
      }
      .playing {
        transform: rotate(5deg) translateX(-28%);
      }
      .pause {
        transform: rotate(-30deg) translateX(-28%);
      }
      .innerimg {
        position: absolute;
        z-index: 3;
        width: 11rem;
        height: 11rem;
        background-color: #f0ad4e;
        border-radius: 50%;
        top: 18vh;
        left: 50%;
        transform-origin: 0%;
        transform: translateX(-50%);
        overflow: hidden;
        animation: rotate 24s linear infinite;
        img {
          width: 100%;
        }
      }
      .outerimg {
        position: absolute;
        z-index: 4;
        width: 16rem;
        height: auto;
        border-radius: 50%;
        top: 12vh;
        left: 50%;
        transform-origin: 0%;
        transform: translateX(-50%);
        animation: rotate 24s linear infinite;
      }
      .music_name {
        color: white;
        position: absolute;
        width: 100vw;
        top: 54%;
        text-align: center;
        left: 50%;
        font-size: 1rem;
        transform: translateX(-50%);
        span {
          display: inline-block;
          padding: 0rem 0.625rem;
        }
      }
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg) translateX(-50%);
      }
      to {
        transform: rotate(360deg) translateX(-50%);
      }
    }
    .lyrics {
      position: absolute;
      width: 90vw;
      left: 5vw;
      top: 60vh;
      height: 22vh;
      z-index: 4;
      .lyricscontent {
        width: 100%;
        ul {
          width: 100%;
          padding-top: 0.0625rem;
          li {
            width: 100%;
            text-align: center;
            color: white;
            font-size: 0.8rem;
            height: 1.5625rem;
            transition: 0.5s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .currentLyric {
            color: #dd0c5c;
            font-size: 1rem;
            height: 1.875rem;
          }
        }
      }
    }
    .progress {
      position: absolute;
      top: 85vh;
      left: 0;
      z-index: 6;
      width: 100vw;
      display: flex;
      .current,
      .duration {
        width: 15vw;
        display: flex;
        height: 1.25rem;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.8rem;
      }
      .el-progress {
        width: 70vw;
      }
      /deep/ .el-progress-bar__inner {
        transition: 0.5s !important;
      }
      /deep/ .el-progress-bar__innerText {
        display: none !important;
      }
    }
    .controlbox {
      position: absolute;
      top: 90vh;
      z-index: 4;
      display: flex;
      justify-content: center;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      div {
        display: flex;
        img {
          width: 3.125rem;
          height: auto;
        }
        .play_pause {
          width: 5.375rem;
          position: relative;
          img {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: -0.625rem;
            width: 4.375rem;
            height: auto;
          }
        }
        .model {
          position: relative;
          width: 5.5rem;
          display: flex;
          justify-content: center;
          img {
            position: absolute;
            top: -0.125rem;
            width: 3.5rem;
            height: auto;
          }
        }
        .menu {
          display: flex;
          justify-content: center;
          width: 5.5rem;
        }
      }
    }
    .bgbox {
      height: 100%;
      width: 100%;
      overflow: hidden;
      position: absolute;
      .bg {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: auto;
        height: 100vh;
        z-index: 0;
        -webkit-filter: blur(2px);
        filter: blur(2px);
      }
      .bg-mask {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
  #menu {
    position: absolute;
    z-index: 10;
    height: 60vh;
    width: 100vw;
    bottom: 0;
    left: 0;
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    background: white;
    .top {
      height: 3rem;
      border-bottom: 0.0625rem solid #ccc;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .text {
        height: 3rem;
        line-height: 3rem;
        font-size: 1rem;
        padding-left: 0.625rem;
      }
      .close {
        height: 100%;
        display: flex;
        align-items: center;
        img {
          width: 2.5rem;
          height: auto;
        }
      }
    }
    .bottom {
      height: calc(100% - 3rem);
      .item {
        display: flex;
        span {
          font-size: 0.85rem;
          height: 1.875rem;
          line-height: 1.875rem;
          color: rgb(124, 122, 122);
          // transition: 0.5s;
        }
        .num {
          flex: 1;
          padding: 0rem 0.625rem;
          box-sizing: border-box;
        }
        .delete {
          flex: 1;
          text-align: center;
        }
        .name {
          flex: 5;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .active_color {
          color: #ad0a49;
          font-size: 0.875rem;
          height: 2.1875rem;
          line-height: 2.1875rem;
        }
        .author {
          flex: 3;
          padding: 0rem 0.625rem;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(60vh);
}
</style>
